<template  lang="pug">
div
  .nav(:class="isTop?null:'slimNav'")
    .content
      .logo(@click="$router.push('/')")
        img(:src="logo")
      .navItem(@click="$router.push('/')")
        span 首页
      a.navItem(:href="WEB_ACADEMY" target="_blank")
        i.el-icon-arrow-down.arrowIcon
        span 云税库
        .subNav
          a.subNavItem(:href="WEB_ACADEMY+'/#/advance'" target="_blank")
            span 法规库
          a.subNavItem(:href="WEB_ACADEMY+'/#/lawquery'" target="_blank")
            span 多维查询
          a.subNavItem(:href="WEB_ACADEMY+'/#/policy'" target="_blank")
            span 政策解读
          a.subNavItem(:href="WEB_ACADEMY+'/#/hottopic'" target="_blank")
            span 热点专题
          //- a.subNavItem(:href="WEB_ACADEMY+'/#/question'" target="_blank")
          //-   span 财税问答
          //- a.subNavItem(:href="WEB_ACADEMY+'/#/blog'" target="_blank")
          //-   span 名家税谈
      a.navItem(:href="WEB_TAX" target="_blank")
        i.el-icon-arrow-down.arrowIcon
        span 云税服
        .subNav
          a.subNavItem(:href="WEB_TAX+'/#/reply/'" target="_blank")
            span 税务答疑
          a.subNavItem(:href="WEB_TAX+'/#/dingzhi'" target="_blank")
            span 专题定制
          a.subNavItem(:href="WEB_TAX+'/#/weituo'" target="_blank")
            span 专项委托
          a.subNavItem(:href="WEB_TAX+'/#/chouhua'" target="_blank")
            span 税务筹划
          a.subNavItem(:href="WEB_TAX+'/#/chuandi'" target="_blank")
            span 信息传递
          //- a.subNavItem(:href="WEB_TAX+'/#/vip'" target="_blank")
          //-   span 会员服务
      .navItem(@click="openWeb('/soft')")
        span 花瓣儿软件
      .navItem(@click="openWeb('/share')")
        //- i.el-icon-arrow-down.arrowIcon
        span 共享空间
      .navItem(@click="openWeb('/about')")
        span 关于我们
      .rightContent
        .navItem.iconfont.icon-zuanshi(@click="openWeb('/enterprise/#/vip')")
        .navItem(v-show="isLogin")
          .userName {{user.nickName||user.userName}}
          .subNav
            .subNavItem(@click="openWeb('/passport')")
              span 我的主页
            .hr
            .subNavItem(@click="openWeb('/passport/#/message')")
              span 消息盒
            .subNavItem(@click="openWeb('/passport/#/setting')")
              span 个人设置
            .hr
            .subNavItem(@click="logout")
              span 退出登录
        .btnItem(v-show="!isLogin")
          span(@click="redirectWeb('/passport/#/login')") 登录
          span(@click="redirectWeb('/passport/#/reg')") 注册
  <!--el-dialog(:visible.sync="showLoginForm" title="登录")-->
    <!--el-form(label-width="80px")-->
      <!--el-form-item(label="账号")-->
        <!--el-input(v-model="loginData.userName" placeholder='请输入手机号')-->
      <!--el-form-item(label="密码")-->
        <!--el-input(v-model="loginData.password" type="password" placeholder='请输入密码')-->
      <!--el-form-item(label="")-->
        <!--el-button(type="primary" @click="handleLogin") 登录-->
        <!--el-button(type="text" @click="redirectWeb('/passport/#/reg')") 还没有账号，点击注册-->
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { WEB_TAX, WEB_ACADEMY } from "@/common/url.js";
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showLoginForm: false,
      loginData: {
        userName: "zhangsan",
        password: "123456"
      },
      WEB_TAX: WEB_TAX,
      WEB_ACADEMY: WEB_ACADEMY
    };
  },
  computed: {
    ...mapGetters(["isTop", "isLogin", "user", "baseurl"]),
    logo() {
      if (this.isTop) {
        return require("@/assets/logo_w.png");
      } else {
        return require("@/assets/logo_b.png");
      }
    }
  },
  methods: {
    ...mapMutations(["setIsTop"]),
    refreshScrollY() {
      if (window.scrollY === 0 && !this.isTop) {
        this.setIsTop(true);
      }
      if (window.scrollY !== 0 && this.isTop) {
        this.setIsTop(false);
      }
    },
    isRouteMeta() {
      if (this.$route.meta.slimNav) {
        this.setIsTop(false);
      } else {
        this.setIsTop(true);
        window.addEventListener("scroll", this.refreshScrollY);
      }
    },
    redirectWeb(val) {
      let currentUrl = window.location.href;
      sessionStorage.setItem("beforeLogin", currentUrl);
      window.location.href = this.baseurl.fgstart + val + "?from=" + currentUrl;
    },
    openWeb(val) {
      window.open(val);
    },
    handleLogin() {
      this.$store.dispatch("login", this.loginData).then(res => {
        this.$message.success("登陆成功");
        this.showLoginForm = false;
      }).catch(err=>{
        this.$message.error("登录失败")
      })
    },
    logout() {
      this.$store.dispatch("logout");
      //this.$message.info("登出成功，跳转到主页");
      //this.$router.push("/");
      this.$message.info("退出成功！");

    }
  },
  created() {},
  mounted() {
    this.isRouteMeta();
  },
  watch: {
    $route: "isRouteMeta"
  }
};
</script>

<style lang="less" scoped>
@nav-bg: transprent;
.nav {
  background: @nav-bg;
  color: @white;
  height: @navHeight;
  border-bottom: 1px solid @nav-border;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  .tran;
  z-index: 1000;
  line-height: @navHeight - 3px;
  .content {
    padding: 0 2em;
  }
  .logo {
    .pointer;
    padding: 10px;
    float: left;
    margin-right: 3em;
    img {
      .tran;
      height: 30px;
    }
  }

  .navItem {
    display: inline-block;
    width: @itemWid;
    position: relative;
    .size(15px);
    .center();
    .pointer();
    .arrowIcon {
      margin-right: 5px;
      .tran;
    }
    .subNav {
      .hide();
      position: absolute;
      top: calc(~"100% + 3px");
      left: (@itemWid - @subItemWid) / 2;
      color: @white;
      background: @dark;
      width: @subItemWid;
      line-height: 40px;
      .size(12px);
      .subNavItem {
        display: block;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
        &:hover {
          color: @primary;
          background: @nav-bg;
          border-top: 1px solid @primary;
          border-bottom: 1px solid @primary;
          &:first-child {
            border-top: 1px solid transparent;
          }
          &:last-child {
            border-bottom: 1px solid transparent;
          }
        }
      }
    }
    &:hover {
      color: @primary;
      border-bottom: 3px solid @primary;
      .arrowIcon {
        transform: rotate(180deg);
      }
      .subNav {
        .show();
      }
    }
  }
  .rightContent {
    position: absolute;
    right: 25px;
    top: 0;
    .navItem {
      &:nth-of-type(1) {
        .size(22px);
        width: 20px;
        color: #CA9247;
        transform: translateY(3px);
        &:hover {
          .o;
          border-bottom: none;
        }
      }
    }
  }
  .btnItem {
    padding: 0 1em;
    .size(14px);
    .inline;
    span {
      .pointer;
      padding: 0 1em;
      &:hover {
        color: @primary;
      }
      &:first-child {
        border-right: 1px solid @border;
      }
    }
  }
  .navMenuItem {
    width: 50px;
    i {
      .size(22px);
    }
    .subNav {
      left: 75px - @subItemWid;
    }
  }
  .userName {
    .inline;
  }
}

.slimNav {
  .nav();
  .logo {
    padding: 5px;
    img {
      height: 20px;
    }
  }
  .logoText {
    .lh(@slimNavHeight);
  }
  .userFaceImg {
    .rounded(30px);
  }
  .navItem {
    .subNav {
      background: @nav-bg2;
      color: @black;
    }
  }
  color: @black;
  background: @nav-bg2;
  height: @slimNavHeight;
  line-height: @slimNavHeight - 3px;
  .tran(0.1s);
  border-bottom: 1px solid @nav-border;
}
</style>

